<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>产品质量查询</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <script src="/js/vue/vue.js"></script>
    <script src="/js/axios/axios.min.js"></script>
    <script src="/js/qs/qs.min.js"></script>
    <!-- 引入组件库 -->
    <script src="/js/elementui/index.js"></script>
    <style>
        #find{
            text-align: center;
        }
        #tab{
            display: none;
        }
        #warning{
            font-family: 楷体;
            color: #ff7463;
            display: none;
        }
        #empty{
            width: 360px;
            height: 100px;
            position: relative;
            left: 36%;
            display: none;
        }
    </style>
</head>
<body>

<div id="find">
    <br>
    <h2>质量查询</h2>
    <br>
    <el-form :inline="true"  :model="formInline" class="demo-form-inline">
        <el-form-item label="" lable-width="300px">
            <el-input v-model="formInline.id" placeholder="请输入产品编码"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="onSubmit()">查询</el-button>
        </el-form-item>
    </el-form>
    <div id="tab">
        <template >
            <el-table id="" border :data="dataTable">
                <el-table-column property="productName"  label="产品名字" width="150"></el-table-column>
                <el-table-column property="productPrice" label="产品价格" width="100"></el-table-column>
                <el-table-column property="productBrand" label="产品品牌" width="150"></el-table-column>
                <el-table-column property="companyName" label="公司" width="150"></el-table-column>
                <el-table-column property="companyProvince" label="公司地址" width="150"></el-table-column>
                <el-table-column property="companyBrand" label="公司品牌" width="150"></el-table-column>
                <el-table-column property="productLocal" label="生产地址" width="150"></el-table-column>
                <el-table-column property="productMaterial" label="原材料" width="150"></el-table-column>
                <el-table-column property="productShelfLife" label="保质期/年" width="100"></el-table-column>
                <el-table-column property="productQuality" label="质量" width="150"></el-table-column>
            </el-table>
        </template>
        <p style="font-size: x-small ;color: rgba(255,38,0,0.52)">注:质量分三等级，优, 良, 差, 1为优 , 0为良, -1为差.</p>
    </div>

    <h4 id="warning">Sorry, The commodity code you inquired does not exist, beware of counterfeiting!<br><br>
        Or contact the customer service personnel of the company!<br><br>
        您所查询的商品编码不存在，谨防假冒! 或与公司客服人员联系!
    </h4>
    <div id="empty" >
        <br>
        <span style="font-family: 楷体;font-size: 26px;text-align: left;color: #ff1d06">
           请输入商品编码!
        </span>
    </div>


</div>
</body>
<script>

    new Vue({
        el:"#find",
        data() {

            return {
                dataTable:null,
                formInline: {
                    id: ''
                },
                checkProduct:{
                    id:'',
                    companyName:'',
                    companyProvince:'',
                    companyBrand:'',
                    productName:'',
                    productPrice:'',
                    productBrand:'',
                    productEnterprise:'',
                    productLocal:'',
                    productMaterial:'',
                    productShelfLife:'',
                    productQuality:''
                }
            }
        },
        methods:{

            onSubmit(){

                console.log("onSubmit");
                this.id = this.formInline.id;
                axios.get("/checkFind?id="+this.id).then(value => {
                    var tab=document.getElementById('tab');
                    var warning=document.getElementById('warning');
                    var empty=document.getElementById('empty');

                    if (this.id == ''){
                        console.log("id为空")
                        tab.style.display='none';
                        warning.style.display='none';
                        empty.style.display='block';
                    }else {
                        if (value.data.code == 1){
                            console.log("ok");
                            this.dataTable=value.data.data;
                            if (this.dataTable.length > 0 ){
                                console.log(value.data.data[0]);
                                console.log("数据不为空");
                                tab.style.display='block';
                                warning.style.display='none';
                                empty.style.display='none';
                            }else {
                                console.log("数据为空");
                                console.log("warning")
                                warning.style.display='block';
                                tab.style.display='none';
                                empty.style.display='none';
                            }

                        }else {
                            console.log("no");
                        }
                    }


                })
            }
        }
    });

</script>
</html>